<template>
	<div class='community-parent'>
		<TopNav
			showInform
			showAvatar
			navName="分享社区"
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="container">
			<!-- 分类 -->
			<div class="types">
				<Button
					class="item"
					v-for="item in types"
					:key="item.value"
					:bgColor="item.value === selectType ? '#00C9A9' : '#EFF3F3'"
					:color="item.value === selectType ? '#ffffff' : 'rgba(0,0,0,0.55)'"
					width="160"
					height="48"
					@click="selectType=item.value"
				>
					{{item.label}}
				</Button>
			</div>
			<Community
				column="4"
				:type="selectType"
			/>
			<img
				class="add-btn"
				src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312095227997-Group 82 (1).png"
				@click="onclickAddBtn"
			>
		</div>
		<DonateModel
			v-if="showDonateModel"
			@close="showDonateModel=false"
		/>
		<ExchangeModel
			v-if="showExchangeModel"
			@close="showExchangeModel=false"
		/>
	</div>
</template>

<script>
import DonateModel from './components/DonateModel'
import ExchangeModel from './components/ExchangeModel'
export default {
  components: {
    DonateModel,
    ExchangeModel
  },
  data() {
    return {
      types: [
        { label: '玩具捐赠', value: 'donate' },
        { label: '玩具交换', value: 'exchange' },
        { label: '孩子发布', value: 'publish' },
      ],
      selectType: this.$route.query.type || 'donate',
      showDonateModel: false,
      showExchangeModel: false,
    }
  },
  watch: {
    selectType: function() {
      this.$replaceTo(this.$route.name, { type: this.selectType })
    }
  },
  methods: {
    onclickAddBtn() {
      if (this.selectType === 0) {
        this.showDonateModel = true
      } else {
        this.showExchangeModel = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.community-parent {
  padding-top: 78px;
  background-color: $bgColor1;

  .container {
    padding: 30px 50px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .types {
      margin-bottom: 60px;
      text-align: center;

      .item:not(:last-of-type) {
        margin-right: 20px;
      }
    }

    .add-btn {
      position: fixed;
      right: 30px;
      bottom: 40px;
      z-index: 100;
      width: 80px;
      cursor: pointer;
    }
  }
}
</style>
